<template>
  <transition name="move">
    <div v-show="mainShow">
      <HomeHeader @enterSearch="enterSearch"/>
      <div class="main">
      <!-- 轮播 -->
      <van-swipe>
        <van-swipe-item v-for="banner in banners" :key="banner.id">
          <img class="banner" :src="banner.picUrl" alt="">
        </van-swipe-item>
      </van-swipe>
      <!-- 宫格导航 -->
      <van-grid :column-num="3" icon-size="40">
        <van-grid-item
          v-for="cate
          in cates"
          :key="cate.id"
          :icon="cate.icon"
          :text="cate.name"
          @click="enterList(cate.id)"
          />
      </van-grid>
      <!-- /宫格导航 -->
      <!-- 楼层 -->
      <Floors :floors="floors" @add_cart="add_cart" @clickItem="enterDetail"/>
      <!-- /楼层 -->
      </div>
      <Tabbar/>
    </div>
  </transition>
</template>

<script>

import Tabbar from '@components/Tabbar'
import HomeHeader from './components/HomeHeader'
import { fetchBanner, fetchCates, fetchItems } from '@api'
import Floors from './components/Floors'
import addCart from '../../mixins/addCart'


export default {
  name: 'Home',
  data () {
    return {
      mainShow: false,
      banners: [],
      cates: [],
      categoryId: 72399,
      floors: []
    }
  },
  mixins: [addCart],
  mounted () {
    this.mainShow = true
  },
  created () {
    this.fetchBannerData()
    this.fetchCates()
    this.fetchItems()
  },
  methods: {
    enterSearch () {
      // 点击头部搜索框 进入 搜索页
      this.$router.push('/search')
    },
    fetchBannerData () { // 请求banner接口
      fetchBanner().then(res => {
        if (res.data.code === 0) {
          this.banners = res.data.data
        }
      })
    },
    fetchCates () {
      // 请求分类接口
      fetchCates().then(res => {
        if (res.data.code === 0) {
          this.cates = res.data.data
        }
      })
    },
    fetchItems () {
      // 首页楼层 商品数据
      fetchItems({ categoryId: this.categoryId }).then(res => {
        if (res.data.code === 0) {
          this.floors = res.data.data
          console.log(this.floors[0])
        }
      })
    },
    enterDetail ({ index, id }) {
      // 进入详情页
      this.$router.push(`/detail/${id}`)
    },
    enterList (cateId) {
      // 进入列表页
      this.$router.push(`/itemList/${cateId}`)
    }
  },
  components: {
    Tabbar,
    HomeHeader,
    Floors
  }
}
</script>

<style lang="scss" scoped>
@import "../../assets/css/common.css";
.banner{
  width:100%;
}
</style>
